<template>
    <div class="listTemplate">
        <header class="t-header">
            <mu-button flat small class="t-close" v-close>
                <i class="iconfont iconangle-left"></i>
            </mu-button>
            <span class="t-title">检查工作</span>
            <mu-button flat small class="t-close t-right-icon" @click="open = true">
                <i class="iconfont iconshaixuan4 active-color"></i>
            </mu-button>
        </header>
        <section class="t-body">
            <mu-container ref="container" class="demo-loadmore-content">
                <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
                    <mu-list>
                        <section v-for="(item, index) in listData" :key="index" style="margin-bottom:5px;">
                            <mu-paper class="demo-paper" :z-depth="2">
                                <section class="box" style="margin:0;" @click="handlePushToDetail({id: item.checkPlanId})">
                                    <p class="line-list flex_b">
                                        <!-- <mu-badge small content="无问题" color="success"></mu-badge> -->
                                        <mu-badge small content="未检查" color="error"></mu-badge>
                                    </p>
                                    <p class="line-list textdot">
                                        <span class>项目名称：{{item.areaName}}</span>
                                    </p>
                                    <p class="line-list textdot">
                                        <span>检查部位：{{item.checkParts}}</span>
                                    </p>
                                    <p class="line-list">
                                        <span>检查类型：{{item.checkTypeName}}</span>
                                    </p>
                                    <p class="line-list textdot">
                                        <span>任务描述：{{item.description}}</span>
                                    </p>
                                    <p class="line-list">
                                        <span>检查时间：2019-12-12 23:00</span>
                                    </p>
                                    <p class="line-list flex_b">
                                        <span>检查频率：{{item.checkFrequency}}</span>
                                        <span>检查率：{{item.checkRate}}</span>
                                    </p>
                                    <p class="line-list flex_b">
                    <span>
                      检查人：
                      <mu-avatar color="primary" size="25">{{splitFirstLetter(item.checkUserName)}}</mu-avatar>{{item.checkUserName}}
                    </span>
                                        <span>
                      责任人：
                      <mu-avatar color="primary" size="25">{{splitFirstLetter(item.responsibleUserName)}}</mu-avatar>{{item.responsibleUserName}}
                    </span>
                                    </p>
                                </section>
                                <section style="padding:10px 0;">
                                    <mu-flex justify-content="around" align-items="center">
                                        <mu-button small>平面图查看</mu-button>
                                        <mu-button small color="primary" @click="assign (item.checkUserName)">任务指派
                                        </mu-button>
                                    </mu-flex>
                                </section>
                            </mu-paper>
                        </section>
                    </mu-list>
                </mu-load-more>
            </mu-container>
        </section>
        <!-- 筛选 -->
        <mu-bottom-sheet :open.sync="open">
            <mu-list @item-click="closeBottomSheet">
                <mu-sub-header>筛选条件</mu-sub-header>
                <mu-list-item button>
                    <div class="flex_b" style="width:100%;">
                        <span>检查结果：</span>
                        <mu-select v-model="form.select" style="padding-bottom: 0; margin-bottom: 0;">
                            <mu-option
                                    v-for="(option,index) in options"
                                    :key="index"
                                    :label="option"
                                    :value="option"
                            ></mu-option>
                        </mu-select>
                    </div>
                </mu-list-item>
                <mu-list-item button>
                    <div class="flex_b" style="width:100%;">
                        <span>问题等级：</span>
                        <mu-select v-model="form.select" style="padding-bottom: 0;margin-bottom: 0;">
                            <mu-option
                                    v-for="(option,index) in options"
                                    :key="index"
                                    :label="option"
                                    :value="option"
                            ></mu-option>
                        </mu-select>
                    </div>
                </mu-list-item>
                <mu-list-item button>
                    <div class="flex_b" style="width: 100%; white-space: nowrap;">
                        <span>开始时间：</span>
                        <mu-date-input
                                icon="today"
                                v-model="form.startTime"
                                container="bottomSheet"
                                label-float
                                full-width
                        ></mu-date-input>
                    </div>
                </mu-list-item>
                <mu-list-item button>
                    <mu-button full-width round color="success" v-on:click.stop="open = false">确认</mu-button>
                </mu-list-item>
            </mu-list>
        </mu-bottom-sheet>
        <!-- 选择指派人 -->
        <mu-drawer :open.sync="openselect" :docked="true" :right="true" width="100%">
            <mu-list style="padding:0;height:100%;">
                <header class="t-header">
                    <mu-button flat small class="t-close" @click="openselect = false">
                        <i class="iconfont iconangle-left"></i>
                    </mu-button>
                    <span class="t-title">任务指派</span>
                </header>
                <mu-flex
                        justify-content="between"
                        align-items="center"
                        style="padding:0 20px;"
                        @click="Examiner=true"
                >
                    <span>指派检查人</span>
                    <span>{{name}}<i class="iconfont iconangle-right"></i></span>
                </mu-flex>
                <div button style="text-align: center;position:absolute;bottom:20px;width:100%;">
                    <mu-button color="error" @click="openselect = false" small>确认</mu-button>
                </div>
            </mu-list>
        </mu-drawer>
        <!--检查人-->
        <mu-drawer :open.sync="Examiner" :docked="true" :right="true" width="100%">
            <mu-list style="padding:0;height:100%;" class="mu-list">
                <header class="t-header">
                    <mu-button flat small class="t-close" @click="Examiner = false">
                        <i class="iconfont iconangle-letabletableft"></i>
                    </mu-button>
                    <span class="t-title">任务指派</span>
                </header>
                <section>
                    <form action v-on:submit.prevent>
                        <mt-search
                                v-model="value"
                                cancel-text="取消"
                                placeholder="请输入姓名搜索"
                                @keyup.enter.native="search"
                                class="font-size-8"
                                style="width:100%;height:auto;"
                        ></mt-search>
                        <slotshow></slotshow>
                        <companySlots></companySlots>
                    </form>
                </section>
            </mu-list>
        </mu-drawer>
    </div>
</template>

<script>
    import slotshow from './slots/inspect_slots'
    import companySlots from './slots/company_slots'
    import apis from '../../../services/apis'

    export default {
        name: 'mainPage',
        computed: {},
        components: {
            slotshow,
            companySlots
        },
        data () {
            return {
                listData: [],
                value: '', // 任务指查询条件
                defaultResult: [
                    'Apple',
                    'Banana',
                    'Orange',
                    'Durian',
                    'Lemon',
                    'Peach',
                    'Cherry',
                    'Berry',
                    'Core',
                    'Fig',
                    'Haw',
                    'Melon',
                    'Plum',
                    'Pear',
                    'Peanut',
                    'Other'
                ],
                num: 20,
                refreshing: false,
                loading: false,
                text: 'List',
                open: false,
                options: ['Option 1', 'Option 2'],
                form: {
                    select: '',
                    startTime: ''
                },
                openselect: false,
                Examiner: false,
                name: ''
            }
        },
        mounted () {
            this.loadCheckWorkListData()
        },
        created () {
        },
        methods: {
            assign (name) {//指派
                this.name = name;
                this.openselect = true;
            },
            splitFirstLetter (letters) {
                if (letters !== null && letters !== undefined) {
                    return letters.substr(0, 1)
                }
                return '无'
            },
            loadCheckWorkListData () {
                const _this = this
                this.$A
                    .Go('get', apis.check_work_list)
                    .then(res => {
                        const {body, msg} = res
                        this.handleListData(body.rows)
                        _this.$A.MS(msg)
                    })
                    .catch(err => {
                        _this.$A.MS(err)
                    })
            },
            handleListData (listData) {
                const newListData = []
                listData.map(item => {
                    const newItem = {}
                    for (let key in item) {
                        if (item[key] !== null) {
                            newItem[key] = item[key]
                        } else {
                            newItem[key] = '无'
                        }
                    }
                    newListData.push(newItem)
                })
                this.listData = newListData
            },
            openBottomSheet () {
                this.open = true
            },
            closeBottomSheet (isnot) {
                this.open = isnot
            },
            refresh () {
                this.refreshing = true
                this.$refs.container.scrollTop = 0
                setTimeout(() => {
                    this.refreshing = false
                    this.text = this.text === 'List' ? 'Menu' : 'List'
                    this.num = 20
                }, 2000)
            },
            load () {
                this.loading = true
                setTimeout(() => {
                    this.loading = false
                    this.num += 20
                }, 2000)
            },

            /**
             * @description 去详情页面
             * @param params {Object} 参数
             * mycopyToDetail
             */
             handlePushToDetail (params) {
                this.$router.push({
                    path: '/mycheckContent',
                    query: params
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    .listTemplate {
        height: 100%;
        width: 100%;
        position: relative;
        overflow: hidden;
        .mu-list {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            header {
                width: 100%;
            }
            section {
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow: auto;
            }
        }
        .t-header {
            height: 0.45rem;
            width: 100%;
            color: #3d3d3d;
            box-sizing: border-box;
            padding: 5px 8px;
            position: relative;
            background-color: #fff;
            // box-shadow: 0 2px 4px -1px rgba(0,0,0,.07), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 7px 0 rgba(0,0,0,.12);
            display: flex;
            justify-content: space-between;
            align-items: center;
            .t-close {
                min-width: 28px;
                border-radius: 50%;
            }
            .t-title {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 0.19rem;
                font-weight: 500;
            }
            .t-right-icon {
                font-size: 0.2rem;
            }
        }
        .t-body {
            height: calc(100% - 0.45rem);
            width: 100%;
            overflow: auto;
            background-color: #f8f8f8;
        }
        .t-body + .t-footer {
            height: 0.45rem;
            width: 100%;
        }
        .t-footer + .t-body {
            height: calc(100% - 0.9rem);
        }
        // 自定义样式
        .areaTitle {
            margin-top: 5px;
            font-size: 0.19rem;
            padding: 10px 20px;
        }
        .box {
            padding: 10px;
            margin-bottom: 5px;
        }
        .line-list {
            margin: 5px 0;
            font-size: 0.15rem;
        }
        .textdot {
            display: block;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

    .flex_b {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>
<style lang="scss">
    .t-close {
        .mu-button-wrapper {
            padding: 0 !important;
        }
    }
</style>
